{include file="header.html"}
<body class="gr">
<style>
	#dialog {
		background-color: #f5f5f5;
		border: 1px solid rgba(0, 0, 0, 0.4);
		height: 250px;
		left: 50%;
		margin: -200px 0 0 -160px;
		padding: 1px;
		position: fixed !important; /* 浮动对话框 */
		position: absolute;
		top:60%;
		width: 320px;
		z-index: 999;
		border-radius: 5px;
		display: none;
	}
	.yuan{
		display:inline-block;
		margin-right:5px;
		border-radius:50px; /* 圆形边缘弧度 */
		width:30px; /* 宽度 */
		height:30px; /* 高度 */
		background-color: #C0C0C0;
	}
	input{
		border: #f2f2f2 solid 1px;
		width: 300px;
		height: 40px;
		color: #a3a3a3;
		font-size: 15px;
		padding-left: 12px;
	}
</style>
<div id="dialog" style="display:none">
	<div class="yuan" style="margin-top: 10px;margin-left: 280px;">
		<a href="javascript:void(0)" onclick="closeBg()" style="text-decoration:none;margin-top: 4px;display: block;">
			X
		</a>
	</div>
	<div style="height: 30px;">
		<p style="color: black;font-size: 20px;text-align: center;">请先绑定手机号码</p>
	</div>

	<form action="api.php?app=passport&act=member_mobile" method="post">
		<div style="width: 300px;height: 30px;margin: 20px auto;">
			<input type="tel" name="mobile" id="mobile" placeholder="请输入手机号码"/>
		</div>
		<div style="width: 300px;height: 30px;margin: 20px auto;position: relative;">
			<input style="float: left;width: 300px;" type="text" name="code" id="code" placeholder="请输入验证码"/>
			<div style="width: 100px;height: 40px;float: left;background-color: #ffb31f;border-radius: 5px;position: absolute;left: 200px;">
				<a href="javascript:void(0)" onclick="Code()" style="text-decoration:none;">
					<p id="sms" style="font-size: 15px;padding-top: 5px;color: white;margin-top: 5px;">
						获取验证码
					</p>
				</a>
			</div>
		</div>
		<div style="width: 300px;height: 40px;margin: 30px auto;">
			<a href="javascript:void(0)"style="text-decoration:none;" onclick="myFn()">
				<div style="width:300px;background-color: #ff881f;margin: 0 auto;text-align: center;border-radius: 8px;height: 40px;">
					<p style="color: white;padding-top: 6px;font-size: 20px">
						提交
					</p>
				</div>
			</a>
		</div>


	</form>

</div>

<div class="home-index main-padding-bottom">
	{if count($data.flashes)>0}
	<div class="pageView">
		<div class="slide">
			<ul>
				{foreach from=$data.flashes item=g}
				<li ad_type="{$g->ad_type}" ad_content="{$g->ad_content}" pic="{$g->pic}"></li>
				{/foreach}
			</ul>
		</div>
		<div class="pager"></div>
	</div>
	{/if}

	<div class="cate">
		{if $data.member_login==1}
		{if $data.mobile==1}
		<a href="?app=cart&act=info" class="cate1">购买社保</a>
		{else}
		<a href="javascript:void(0)" onclick="mobile()" class="cate1">购买社保</a>
		{/if}
		{else}
		<a href="javascript:void(0)" onclick="member_login()" class="cate1">购买社保</a>
		{/if}
		<a href="?app=home&act=casy" class="cate2">社保计算器</a>
		<a href="?app=member&act=order" class="cate3">我的订单</a>
		<a href="?app=member&act=index" class="cate4">个人中心</a>
	</div>

	<ul class="grid">
		{foreach from=$data.grids item=g}
		<li class="ge-right ge-bottom">
			<a href="?app=article&act=detail&id={$g->id}">
				<div class="left"><span class="title">{$g->title}</span><span class="description">{$g->memo}</span></div>
				<div class="img" {if $g->pic!=''}style="background-image:url({$g->pic});"{/if}></div>
			</a>
		</li>
		{/foreach}
	</ul>

	<div class="tip ge-bottom">资讯快讯<a href="?app=article&act=index">更多</a></div>
	<ul class="list">
		{foreach from=$data.articles item=g}
		<li class="ge-bottom"><a href="?app=article&act=detail&id={$g->id}">{$g->title}</a></li>
		{/foreach}
	</ul>

	<div class="bottom">{$web_title}<span class="mobile">0755-82553869</span></div>
</div>

{include file="footer.html"}
<script>
function resize(){
	$('.pageView').autoHeight(320, 135);
	$('.pageView li').css({ width:$('.pageView').width(), height:$('.pageView').height() });
	$('.pageView').touchmove({
		pager : '.pager',
		drag : true,
		auto : 4000,
		autoWait : 4000,
		complete : function(){
			$('.pager').css('margin-left', -$('.pager').width()/2);
			setAds('.pageView .slide li');
		}
	});
}
$(window).resize(resize);
$(function(){
	resize();

	//计算器
	pushBodyView('.cate a:eq(1)', function(bodyView, delegateLink){
		bodyView.find('#casy_id').change(function(){
			bodyView.find('#casy_money').html($(this).selected().attr('money')).prev().addClass('btn-x');
		});
		bodyView.find('.gjj-view .btn').click(function(){
			var gjj = bodyView.find('#gjj'), min = gjj.attr('min');
			if(!!!min)return;
			var _this = $(this);
			if(_this.hasClass('btn-x')){
				_this.removeClass('btn-x');
				gjj.val('');
			}else{
				_this.addClass('btn-x');
				gjj.val(min);
			}
		});
		bodyView.find('#gjj').keyup(function(){
			var _this = $(this), min = _this.attr('min');
			if(_this.val().length && Number(_this.val())==Number(min)){
				bodyView.find('.gjj-view .btn').addClass('btn-x');
			}else{
				bodyView.find('.gjj-view .btn').removeClass('btn-x');
			}
		});
		bodyView.find('.reset').click(function(){
			bodyView.find('#casy_money').html('填写基数');
			bodyView.find('#province_id').val('');
			bodyView.find('#city_id').val('');
			bodyView.find('#gjj').val('');
			bodyView.find('.select-view a').html('请选择城市').addClass('placeholder');
			bodyView.find('#casy_id').html('<option value="">请选择险种类型</option>');
			bodyView.find('.gjj .text:eq(0)').html('<span>公司</span>0.00%');
			bodyView.find('.gjj .text:eq(1)').html('<span>个人</span>0.00%');
			bodyView.find('.btn-x').removeClass('btn-x');
			bodyView.find('.buttonView .btn').removeClass('btn');
		});
		pushBodyView({
			link : bodyView.find('.buttonView a:eq(1)'),
			click : function(){
				if(!bodyView.find('#province_id').val().length || !bodyView.find('#city_id').val().length){
					//$.overloadError('请选择城市');
					return false;
				}
				if(!bodyView.find('#casy_id').selected().val().length){
					//$.overloadError('请选择险种类型');
					return false;
				}
				var gjj = bodyView.find('#gjj');
				if(gjj.val().length && (Number(gjj.val())<Number(gjj.attr('min')) || Number(gjj.val())>Number(gjj.attr('max')))){
					$.overloadError('公积金范围值为'+parseInt(gjj.attr('min'))+'~'+gjj.attr('max'));
					return false;
				}
			},
			data : function(){
				return {
					province_id : bodyView.find('#province_id').val(),
					city_id : bodyView.find('#city_id').val(),
					casy_id : bodyView.find('#casy_id').selected().val(),
					gjj : bodyView.find('#gjj').val()
				}
			}
		}, function(bodyView){

		});

		//参保地
		pushBodyView(bodyView.find('.select-view a'), function(bodyView, link, delegate){
			function search(){
				var keyword = bodyView.find('#keyword').val();
				if(!keyword.length){
					bodyView.find('.view:not(.search) a').show();
				}else{
					bodyView.find('.view:not(.search) a').each(function(){
						if($(this).text().indexOf(keyword)>-1)$(this).show();
						else $(this).hide();
					});
				}
				bodyView.find('.view:not(.search) a').addClass('ge-bottom').filter(':visible:last').removeClass('ge-bottom');
			}
			bodyView.find('.search a').click(function(){
				search();
			});
			bodyView.find('.search input').onkey(function(code){
				if(code==13)search();
			});
			bodyView.find('.view:not(.search) a:visible:last').removeClass('ge-bottom');
			pushBodyView('.cart-province .view:not(.search) a', function(bodyView){
				function search(){
					var keyword = bodyView.find('#keyword').val();
					if(!keyword.length){
						bodyView.find('.view:not(.search) a').show();
					}else{
						bodyView.find('.view:not(.search) a').each(function(){
							if($(this).text().indexOf(keyword)>-1)$(this).show();
							else $(this).hide();
						});
					}
					bodyView.find('.view:not(.search) a').addClass('ge-bottom').filter(':visible:last').removeClass('ge-bottom');
				}
				bodyView.find('.search a').click(function(){
					search();
				});
				bodyView.find('.search input').onkey(function(code){
					if(code==13)search();
				});
				bodyView.find('.view:not(.search) a:visible:last').removeClass('ge-bottom');
				bodyView.find('.view:not(.search) a').click(function(){
					delegate.find('#province_id').val($(this).attr('province-id'));
					delegate.find('#city_id').val($(this).attr('city-id'));
					link.removeClass('placeholder').html($(this).attr('name'));
					$.getJSON('api.php?app=home&act=get_casy&city_id='+$(this).attr('city-id'), function(json){
						if(json.error!=0){ $.overloadError(json.msg);return }
						var html = '';
						$.each(json.data.casy, function(){
							html += '<option value="'+this.id+'" money="'+this.money+'">'+this.name+'</option>';
						});
						delegate.find('#casy_id').html(html).change();
						delegate.find('.gjj .text:eq(0)').html('<span>公司</span>'+json.data.row.firm+'%');
						delegate.find('.gjj .text:eq(1)').html('<span>个人</span>'+json.data.row.person+'%');
						delegate.find('#gjj').val(json.data.row.money).attr({ min:json.data.row.money, max:json.data.row.max_money }).removeAttr('disabled').prev().addClass('btn-x');
						delegate.find('.home-casy .buttonView a:eq(1)').addClass('btn');
						popToBodyView(1);
					});
				});
			});
		});
	});
});
//绑定手机号码
function mobile() {
    $("#dialog").show();
}

function closeBg() {
    $("#dialog").hide();
}
var _mobileText = '', _codeText = '', _getCode = false, _count = 0, _timer = null;
function myFn(){
    if(!$('#mobile').val().length){
        alert('请输入手机号码');
        return;
    }
    if(!$('#code').val().length){
        alert('请输入验证码');
        return;
    }
    if($('#code').val()!=_codeText){
        alert('验证码不正确');
        return;
    }
    $('form').submit();
}
function Code(){
    if(_getCode)return false;
    if(!$('#mobile').val().length){
        alert('请输入手机号码');
        return false;
    }
    var _this = $(".disabled");
    _getCode = true;
    _mobileText = _codeText = '';
    $.postJSON('api.php?app=passport&act=send_sms', { mobile:$('#mobile').val() }, function(json){
        if(json.error!=0){
            alert(json.msg);
            return;
        }
        _mobileText = json.data.mobile;
        _codeText = json.data.code;
        var count = 60;
        const countDown = setInterval(() => {
            if (count === 0) {
                _getCode = false;
                $('#sms').text('重新发送').removeAttr('disabled');
                clearInterval(countDown);
            } else {
                $('#sms').attr('disabled', true);
                $('#sms').text(count + '秒后重发');
            }
            count--;
        }, 1000);

    });
}
function member_login() {
	alert('请先登录');
    window.location.href='wap.php?tpl=login';
}
</script>